import { useMemo,useEffect, useState, useCallback } from "react";
import ChildBack from './ChildBack'
let arr =[]
function MemoCallBack() {
    const [counter,setCounter] = useState(0)
    const [test,setTest] = useState(10)
    const [arr,setArr] = useState([
        {name:'bal',age:18},
        {name:'bal bal',age:28},
        {name:'bal bal2',age:24},
    ])

    console.log('counter');
    useEffect(()=>{
        // todo axios

        return ()=>{
            // 卸载时调用 
        }
    },[])

    const getCpt = ({fun}= {})=>{
        console.log('getCpt');
        // fun && fun()
        return (
            <p>我是一个普通的函数组件,想看counter变化{counter}</p>
        )
    }
  
   const useMemoDemo =  useMemo(()=>{
    console.log('useMemo');
        return getCpt()
    },[counter])

 const useMemofilter = useMemo(()=>{
    const arrFilter = arr.filter(item=>{ console.log('filter');return item.age>18})
    return arrFilter

 },[arr])

 const testFun = ()=>{
     console.log('testCallbackFun');
 }

 
  const cb = useCallback(testFun,[])

//   cb()()
    // console.log('cbcb1',cb);
    
    // const useMemoDemo = useMemo
    return ( 
        <>
        {useMemoDemo}
         {/* {<getCpt fun={cb}></getCpt>}  */}
       <p> <button onClick={()=>setCounter(pre=>pre+1)} >我点击</button></p>
          <p> <button onClick={()=>setTest(pre=>pre+1)} >变N次</button></p>
          {useMemofilter.map(item=>(<p key={name}>{item.name},{item.age}</p>))}
          {/* <p> <button onClick={cb()} >我是callBack</button></p>  */}
          <ChildBack
          productId={1}
           referrer={2}
           themeFun={cb}
          ></ChildBack>
        </>
     );
}

export default MemoCallBack;